<template>
  <div>
    <div class="mod-organizations" v-if="visible">
      <el-form :inline="true" :model="dataForm" class="mod-search" @keyup.enter.native="searchByName()">
        <el-form-item>
          <el-input size="small" v-model="dataForm.name" placeholder="请输入组织机构名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchByName" class="custom-btn">查询</el-button>
          <el-button size="small" v-if="isAuth('sys:organizations:delete')" type="danger" @click="batchDelete()"
            :disabled="dataListSelections.length <= 0" class="custom-btn">批量删除</el-button>
          <el-button size="small" v-if="isAuth('sys:organizations:save')" type="success" @click="addOrUpdateHandle()"
            class="custom-btn">新增</el-button>
          <el-button size="small" type="warning" plain @click="exportData()" class="custom-btn">批量导出Excel</el-button>
          <el-upload style="display: inline-block; margin-left: 10px"
            action="http://localhost:8080/sys/organizations/import" :headers="{ token: this.$cookie.get('token') }"
            :show-file-list="false" :on-success="handleImport">
            <el-button size="small" plain type="primary" class="custom-btn">批量导入Excel</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <!-- 多选 -->
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="id" label="序号" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="name" label="组织机构名" header-align="center" align="center" width="100">
          <template slot-scope="scope">
            <el-tag type="info" effect="plain">{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createUserId" label="创建者" header-align="center" align="center" width="120">
          <template slot-scope="scope">
            <el-tag type="warning"> <span>{{ getCreateUserName(scope.row.createUserId) }}</span></el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="description" label="描述" header-align="center" align="center" :show-overflow-tooltip="true"
          width="auto">
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" width="80" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.status === 0">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button v-if="isAuth('sys:user:info')" type="text" size="mini" @click="orgDetails(scope.row)"
              class="custom-btn" style="color: gold">详情</el-button>
            <el-button v-if="isAuth('sys:organizations:update')" type="text" size="mini"
              @click="addOrUpdateHandle(scope.row.id)" class="custom-btn">修改</el-button>
            <el-button v-if="isAuth('sys:organizations:delete')" type="text" size="mini"
              @click="batchDelete(scope.row.id)" class="custom-btn" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
        :page-sizes="[5, 10, 30, 50]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 新增或修改弹窗 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    </div>
    <!-- 详情页面 -->
    <org-details ref="orgDetails" @goBack="goback()" v-if="detailVisible"></org-details>
  </div>


</template>

<script>
import AddOrUpdate from './organizations-add-or-update'

import OrgDetails from "./organizations-orgDetails.vue";

export default {
  data() {
    return {
      dataForm: {
        name: '',
      },
      dataList: [],  // 存储从服务器获取的组织机构列表数据
      pageIndex: 1,  // 当前页码
      pageSize: 10,  // 每页显示的条数
      totalPage: 0,  // 总条数
      dataListLoading: false,  // 数据加载状态
      dataListSelections: [],  // 多选选中的行
      addOrUpdateVisible: false,  // 控制新增或修改弹窗的显示与隐藏
      detailVisible: false,  // 控制详情弹窗的显示与隐藏
      visible: true,       //控制父组件的显示与隐藏
      UserListOptions: []   //用户列表
    }
  },
  // 注释：components是vue的局部注册，局部注册的组件只能在当前组件中使用，不能在其他组件中使用。
  components: {
    AddOrUpdate,
    OrgDetails
  },
  // 注释：activated是vue的生命周期函数，在当前组件被激活时调用，类似于mounted。
  activated() {
    this.getDataList();  // 获取组织机构列表数据
    this.searchByName(); // 根据组织机构名查询
    this.getUserList();
  },

  methods: {

    // 获取列表数据
    /*******************************************************************获取部门列表数据****************************************************************************** */
    getDataList() {
      this.dataListLoading = true;  // 设置数据加载状态为true
      this.$http({
        url: this.$http.adornUrl('/sys/organizations/list'),  // 请求URL
        method: 'get',  // 请求方法
        params: this.$http.adornParams({  // 请求参数
          'page': this.pageIndex,
          'limit': this.pageSize,
          // 'name': this.dataForm.name
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;  // 将获取的数据赋值给dataList
          this.totalPage = data.page.totalCount;  // 设置总条数
        } else {
          this.dataList = [];  // 如果请求失败，清空数据列表
          this.totalPage = 0;  // 清空总条数
        }
        this.dataListLoading = false;  // 设置数据加载状态为false
      });
    },


    /*******************************************************************获取部门列表数据****************************************************************************** */

    // 根据组织机构名查询
    /*******************************************************************按照组织机构名模糊查询****************************************************************************** */
    searchByName() {
      this.dataListLoading = true;  // 设置数据加载状态为true
      this.$http({
        url: this.$http.adornUrl('/sys/organizations/findByLikeName'),  // 请求URL
        method: 'get',  // 请求方法
        params: this.$http.adornParams({  // 请求参数
          'name': this.dataForm.name  // 将输入的组织机构名赋值给name
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.dataList = data.data;  // 将获取的数据赋值给dataList
          this.totalPage = this.dataList.length;  // 设置总条数为dataList的长度
        } else {
          this.dataList = [];  // 如果请求失败，清空数据列表
          this.totalPage = 0;  // 清空总条数
        }
        this.dataListLoading = false;  // 设置数据加载状态为false
      });
    },


    /*******************************************************************按照组织机构名模糊查询****************************************************************************** */

    // 删除和批量删除
    /*******************************************************************删除和批量删除****************************************************************************** */
    batchDelete(id) {
      // 根据是否传递了 id 来确定要删除的 id 列表
      // 如果传递了 id，则删除单个记录；否则，删除多选的记录
      let ids = id ? [id] : this.dataListSelections.map(item => item.id);
      //弹出对话框提示确定要对组织机构名为“xxx”的组织机构进行删除操作？
      var orgname = id ? [this.dataList.find(item => item.id === id).name] : this.dataListSelections.map(item => {
        return item.name;
      });
      //提示确定要对组织机构名字为“xxx”的组织机构进行删除操作？
      this.$confirm(`确定要对组织机构名字为“【${orgname}】”的组织机构进行${id ? '删除' : '批量删除'}操作?`, '提示', {
        confirmButtonText: '确定',  // 确认按钮文本
        cancelButtonText: '取消',  // 取消按钮文本
        type: 'warning'  // 对话框类型（警告）
      }).then(() => {
        // 用户点击“确定”后，发送删除请求
        this.$http({
          url: this.$http.adornUrl('/sys/organizations/delete'),  // 请求的 URL
          method: 'post',  // 请求方法
          data: this.$http.adornData(ids, false)  // 请求数据，确保传递的是一个数组
        }).then(({ data }) => {
          // 处理响应数据
          if (data && data.code === 200) {
            // 如果删除成功，显示成功消息
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                // 成功消息关闭后，重新加载数据列表
                this.getDataList();
              }
            });
          } else {
            // 如果删除失败，显示错误消息
            this.$message.error(data.msg || '操作失败');
          }
        }).catch(error => {
          // 处理请求错误
          this.$message.error('请求出错，请稍后再试');
          console.error(error);  // 打印错误信息到控制台
        });
      }).catch(() => {
        // 用户点击“取消”后，不做任何操作
      });
    },
    /*******************************************************************删除和批量删除****************************************************************************** */


    // 显示详情
    /*******************************************************************显示详情* */
    //详情页面
    orgDetails(row) {
      this.detailVisible = true    // 打开详情弹窗
      this.visible = false   //父组件的显示状态（详情界面才需要设置）
      this.$nextTick(() => {
        this.$refs.orgDetails.init(row)  //访问子组件的方法
      })
    },

    // 详情界面返回
    goback() {
      this.detailVisible = false;
      this.visible = true;
    },

    // 每页数
    handleSizeChange(val) {
      this.pageSize = val;  // 更新每页显示的条数
      this.pageIndex = 1;  // 重置当前页码为1
      this.getDataList();  // 重新获取数据列表
    },

    // 当前页
    handleCurrentChange(val) {
      this.pageIndex = val;  // 更新当前页码
      this.getDataList();  // 重新获取数据列表
    },

    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;  // 更新多选选中的行
    },

    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;  // 显示新增或修改弹窗
      // 等待弹窗组件渲染完成
      this.$nextTick(() => {
        // 初始化弹窗数据
        this.$refs.addOrUpdate.init(id);
      });
    },

    // 获取用户列表
    getUserList() {
      this.$http({
        url: this.$http.adornUrl('/sys/user/list'),
        method: 'get',
        params: this.$http.adornData({})
      }).then(({ data }) => {
        console.log('Response data:', data); // 添加调试信息
        if (data && data.code === 0) {
          this.UserListOptions = data.page.list.map(item => ({
            value: item.userId,
            label: item.realName,
          }));
          console.log('User options:', this.UserListOptions); // 添加调试信息
        } else {
          console.error('Failed to fetch user list:', data.msg);
        }
      }).catch(error => {
        console.error('Error fetching user list:', error);
      })
    },

    // 导出数据
    exportData() {
      // 调试：输出选中项
      console.log('Selected items:', this.dataListSelections);

      const idStr = this.dataListSelections.map(item => `${item.id}`).join(',');
      console.log('Exporting IDs:', idStr);

      // 没有选择行的时候全部导出，或者根据搜索条件导出
      if (this.dataListSelections.length === 0) {
        this.$confirm(`确定导出全部数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击“确定”后，发送导出请求
          const exportUrl = this.$http.adornUrl('/sys/organizations/export?token=' + this.$cookie.get('token') + '&name=' + this.dataForm.name);
          console.log('Export URL for all:', exportUrl);
          // 打开导出页面
          window.open(exportUrl);
        }).catch(() => {
          // 用户点击“取消”后，不做任何操作
        });
      } else {
        // 如果选中了行，导出选中的行
        const exportUrl = this.$http.adornUrl('/sys/organizations/export?token=' + this.$cookie.get('token') + '&ids=' + idStr);
        console.log('Export URL for selected:', exportUrl);
        try {
          window.open(exportUrl);
        } catch (error) {
          console.error('Export error:', error);
          this.$message.error('导出失败，请重试！');
        }
      }
    },

    //批量导入
    handleImport(data, file, fileList) {
      console.log('data' + data)
      // this.load(1)
      if (data && data.code === 200) {
        this.$message.success("上传成功")
        this.getDataList()
      } else {
        this.$message.error(data.data)
      }
    },

    getCreateUserName(createUserId) {
      const department = this.UserListOptions.find(option => option.value === createUserId)
      return department ? department.label : ' '
    }
  }
}
</script>

<style scoped>
.custom-btn {
  /* 默认样式 */
  text-decoration: none;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.custom-btn:hover {
  /* 悬停时的样式 */
  color: #ff6f61; /* 改变文字颜色 */
  background-color: #f0f0f0; /* 添加背景色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 5px; /* 增加内边距 */
  transform: scale(1.1); /* 缩放效果 */
}


</style>
